<template>
  <div style="padding: 20px">
    <el-card class="box-card">
    <el-form :label-position="labelPosition"  label-width="22%" :model="formLabelAlign">
      <br/>
      <div class="text">添加轮播图</div>
      <br/>
      <el-form-item label="轮播图商品ID">
        <el-input v-model="formLabelAlign.productId"></el-input>
      </el-form-item>
      <el-form-item label="轮播图商品图片链接">
        <el-input v-model="formLabelAlign.productImage"></el-input>
      </el-form-item>
      <el-form-item label="上传商品图片">
        <div style="height:70px;">
          <input ref="clearFile" type="file" multiple="multiplt" accept=".jpg,.png,.gif" @change="getFile($event)">
          <span class="add-file-right-more">支持扩展名：.jpg .png .gif </span>
        </div>
        <div class="add-file-list">
          <ul>
            <li v-for="(item, index) in image" :key="index"><a>{{ item.name }}</a></li>
          </ul>
        </div>

      </el-form-item>
      <el-form-item label="轮播图上架开始时间">
        <el-col :span="11">
          <el-date-picker type="datetime" placeholder="Pick a date" v-model="formLabelAlign.startDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="轮播图上架结束时间">
        <el-col :span="11">
          <el-date-picker type="datetime" placeholder="Pick a date" v-model="formLabelAlign.endDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
          <el-button type="primary"  @click="upload">添加</el-button>
          <el-button >取消</el-button>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    data() {
      return {
        labelPosition: 'left',
        image: [],
        formLabelAlign: {
        }
      };
    },
    methods:{
      upload: function() {
        let adduser={
          productId: this.formLabelAlign.productId,
          productImage: this.formLabelAlign.productImage,
          startDate: this.formLabelAlign.startDate,
          endDate:this.formLabelAlign.endDate
        }
        this.$axios({
          headers:{
            "Content-Type": "application/json"
          },
          method:"post",
          url:"http://localhost:8080/api/carousel/addcarousel",
          data:{
            productId: adduser.productId,
            productImage: adduser.productImage,
            startDate: adduser.startDate,
            endDate: adduser.endDate
          }
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
          }
        })
      },
      getFile: function(event) {
        var file = event.target.files
        for (var i = 0; i < file.length; i++) {
          //    上传类型判断
          var imgName = file[i].name
          var idx = imgName.lastIndexOf('.')
          if (idx !== -1) {
            var ext = imgName.substr(idx + 1).toUpperCase()
            ext = ext.toLowerCase()
            if (ext !== 'png' && ext !== 'jpg' && ext !== 'gif') {

            } else {
              this.image.push(file[i])
              this.upimage()
            }
          } else {

          }
        }
      },
      upimage:function(){
        const form =new FormData()
        form.append('image',this.image[0])
        this.$axios({
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          method: 'POST',
          url: 'http://localhost:8080/api/product/uploadimage',
          data: form
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.formLabelAlign.productImage=res.data.proImage
            this.$message({
              message: '上传成功'+res.data.proImage,
              type: 'success'
            });
          }else {
            this.$message({
              message: '失败',
              type: 'success'
            });
          }
        })
      },

      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      }
    }
  }
</script>

<style scoped>
  .text {
    font-size: 30px;
    line-height: 46px;
    text-align: center;
  }
  .box-card {
    width: 700px;
    margin-left: 8%;
  }
</style>

